<template>
  <div>
    <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="header"   left-arrow @click-left="$router.go(-1)" />
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">  <!-- @load="onLoad" -->
      <van-cell class="news-content" v-for="item in articleList"  @click="oNarticle(item.id)":key="item.id" >
        <ul>
          <li  >
             <div class="fl new-box">
              <span class="new-span">{{item.title}}</span>
              <span class="new-content" v-html="content"></span>
              <div class="new-data">
                <div class="fl data">{{item.updateDate}}</div>
                <div class="fr data">{{item.number}}</div>
              </div>
            </div>
            <div class="fr new-img">
              <img :src="item.funImg" alt="">
            </div>
          </li>
        </ul> 
       </van-cell>
    </van-list>
  </div>
</template>

<script>
import apiHttp from '../../../../../api/index'
import { Toast } from 'vant';
  export default {
    data() {
      return {
        id:this.$route.query.id ? this.$route.query.id : '',  // 判断页面是否存在id
        header:"老年大学",
        articleList:[],
        content:"",
        loading: false,
        finished: false,
        total:-1,
        page:0
      }
    },
    methods: {
      oNarticle(id){
        this.$router.push({path:"/details/details",query: { id: id}});
      },
      // 新闻列表---接口
      getArticleList(){
        let params ={
          page : this.page,
          pageSize :10,
          commId:this.id,
          type:8
        }
        apiHttp.comIndex.getArticleList(params,resp=>{
        if(resp.resultCode == '000000'){
            for(let i = 0; i < resp.data.articleList.length; i++){
              this.articleList.push(resp.data.articleList[i])
            }
            this.total = resp.data.total
            this.loading = false;
          }else{
            Toast(resp.resultMsg)
          }
        })
      },
      onLoad(){
        if(this.articleList.length == this.total){
            this.finished  = true
            this.loading = false;
        }else{
            this.page++
            this.getArticleList();
        }
      }
    },
    mounted: function(){
      //这个是钩子函数
    }
    
  }

</script>
<style scoped>
  @import '../../../../../assets/css/index.css'; 
   .van-cell{
     width: 90%;
   }
   .new-data{
    margin-top: 1.2rem;
   }
  .new-span{
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 0.8rem;
  }

</style>